<template>
	<view>
		<view class="statusClass">
			<view :class="titleClassView0" @click="setStatus(0)">全部</view>
			<view :class="titleClassView1" @click="setStatus(1)">用户</view>
			<view :class="titleClassView2" @click="setStatus(2)">司机</view>
		</view>
		<uni-list :border="true">
			<!-- 自定义右侧内容 -->
			<uni-list-item :title="'账号：' + item.username" :note="'最后登录时间：' + timestampToString(item.lastLoginTime)" v-for="(item,index) in orderList" :key="index" 
				:right-text="'注册时间：' + timestampToString(item.createTime)" :clickable="true">
			</uni-list-item>
		</uni-list>
		<uni-load-more color="#007AFF" :status="statusText" :content-text="contentText"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParams:{
					pageNo: 1,
					pageSize: 20
				},
				total: 0,
				orderList: [],
				isRole: 0,
				token: '',
				titleClassView0: 'titleClass',
				titleClassView1: 'titleClass',
				titleClassView2: 'titleClass',
				statusText: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				httpUrl: 'http://192.168.31.178:8084/api',
			}
		},
		onLoad(option) {
			var isRole = option.isRole
			var token = uni.getStorageSync('token');
			console.log('token11111:',token)
			if(token){
				this.token = token
				this.setStatus(parseInt(isRole))
			} else {
				uni.showToast({title:'请先登录',icon:'error',duration: 2000})
				uni.navigateTo({
				    url: '/pages/login/login'
				});
			}
			console.log(isRole)
		},
		onShow() {
			this.queryParams.pageNo = 1
			this.getList()
		},
		onPullDownRefresh() {
			this.queryParams.pageNo = 1
			this.getList()
		},
		onReachBottom() {
			if(this.statusText != 'noMore'){
				this.statusText = 'loading'
				this.getPageNum()
			} else {
				this.statusText = 'noMore'
			}
		},
		methods: {
			getList(){
				var that = this
				uni.request({
					url: that.httpUrl + '/user/getList?isRole=' + that.isRole,
					method: 'GET',
					data: that.queryParams,
					header: {
						'like-token':that.token
					},
					success(res) {
						if (res.data.code !== 200) {
							uni.showToast({title:res.data.msg,icon:'error',duration: 2000})
							return
						} else{
							if(that.queryParams.pageNo === 1){
								that.orderList = res.data.data.lists
							} else {
								that.orderList = that.orderList.concat(res.data.data.lists)
							}
							if(that.queryParams.pageNo * that.queryParams.pageSize >= res.data.data.count){
								that.statusText = 'noMore'
							}
							uni.stopPullDownRefresh();
						}
					},
					fail(err) {
						uni.stopPullDownRefresh();
						uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
					}
				})
			},
			getPageNum(){
				this.queryParams.pageNo += 1;
				this.getList()
			},
			setStatus(isRole){
				this.isRole = isRole
				if(isRole === 0){
					this.titleClassView0 = 'titleClickClass'
					this.titleClassView1 = 'titleClass'
					this.titleClassView2 = 'titleClass'
				} else if(isRole === 1){
					this.titleClassView1 = 'titleClickClass'
					this.titleClassView0 = 'titleClass'
					this.titleClassView2 = 'titleClass'
				} else if(isRole === 2){
					this.titleClassView2 = 'titleClickClass'
					this.titleClassView0 = 'titleClass'
					this.titleClassView1 = 'titleClass'
				} 
				this.orderList = []
				this.getList()
			},
			timestampToString(timestamp) {
			  let gm_mini = new Date().getTimezoneOffset()*60*1000;//与格林威治时间毫秒差
			  var date = new Date(timestamp * 1000 + gm_mini + (8 * 60 * 60 * 1000));
			  const year = date.getFullYear();
			  const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
			  const day = ('0' + date.getDay()).slice(-2);
			  const hours = ('0' + date.getHours()).slice(-2);
			  const minutes = ('0' + date.getMinutes()).slice(-2);
			  const seconds = ('0' + date.getSeconds()).slice(-2);
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		  }
		}
	}
</script>

<style>
.statusClass{
	display: flex;
	flex-direction: row;
	justify-items: center;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 10px;
}
.titleClass{
	width: 150px;
	font-size: 20px;
	background-color: #fff;
}
.titleClickClass{
	width: 150px;
	font-size: 20px;
	color: #5555ff;
}
</style>
